


<template>
    <!-- 头部 -->
    <div class="header"
    >
      <div class="head_top"></div>
      <div class="head_middle"></div>
      <div class="head_content">
        <div class="card_banner">
          <div class="card_banner_img">

          </div>
          <div class="gift-goin">
            <div class="gift-goin-left">
              <img class="gift-goin-img" src="https://tb2.bdstatic.com/tb/img/ihome_batou_icon_1334d8e.png" alt="">
            </div>
          </div>
        </div>
        <div class="card-wrap">
          <div class="card-wrap-left">
            <div class="card-wrap-left-outer">
              <div class="card-wrap-left-img">
                <a href=""><img class="card-wrap-left-img-img"
                    src="https://imgsa.baidu.com/forum/pic/item/8718367adab44aed79cb3c73b21c8701a08bfba4.jpg"
                    alt=""></a>
              </div>
              <div class="card-wrap-left-top">
                <div style="font-size: 22px;
    color: #333">lol陪玩吧</div>
                <button style="background:#ff6d6d
                  color: #fff;">+关注</button>
                <div style="color: #ff7f3e;
    font-family: Arial;
    margin-right: 15px;
    ">关注:9999</div>
                <div style="    color: #ff7f3e;
    font-family: Arial;
    margin-right: 15px;">帖子:6666</div>
              </div>
              <div class="card-wrap-left-content">
                <div style="color: #4c4c4c;
    text-decoration: none;
    font-size: 14px;
    /* float: left; */
    /* padding-right: 30px; */
    position: relative;
    max-width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    ">我不会忘记。那里，曾有着无可替代的天空…</div>
                <div style="    color: #AAA;">目录:游戏交易及功能</div>
              </div>
            </div>
          </div>
          <div class="card-wrap-right">
            <div class="card-wrap-right-outer">
              <div class="card-wrap-right-outer-left">
                <a class="card-wrap-right-outer-left-text">签到</a>
              </div>
              <div class="card-wrap-right-outer-right">
                <div class="card-wrap-right-outer-right-text">
                  <div>10月06日</div>
                  <div>漏签0天</div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="card-nav">
          <div class="card-nav-left">
            <div class="card-nav-left-item">看帖</div>
            <div class="card-nav-left-item">图片</div>
            <div class="card-nav-left-item">吧主推荐</div>
            <div class="card-nav-left-item">我的游戏</div>
          </div>
          <div class="card-nav-right">
            <input type="text" placeholder="吧内搜索">
            <button>搜索</button>
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'TiebaTitle',
});
</script>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.header {
  .head_content {
    width: 978px;
    margin:  0 auto;
    .card_banner {
      display: block;
      position: relative;
      overflow: hidden;

      .card_banner_img {
        height: 180px;
        // position: absolute;
        background-image: url(https://tb1.bdstatic.com/tb/cms/frs/bg/default_head20141014.jpg);
      }

      .gift-goin {
        width: 248px;
        height: 50px;
        position: absolute;
        right: 40px;
        top: 40px;
        overflow: hidden;

        .gift-goin-left {
          width: 248px;
          height: 50px;
          position: absolute;
          right: 0;
          z-index: 1;

          .gift-goin-img {
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            z-index: 2;
          }
        }

      }
    }

    .card-wrap {
      height: 90px;
      background-color: #f3f5f8;

      .card-wrap-left {
        width: 615px;
        height: 89px;
        // background-color: blueviolet;
        float: left;

        .card-wrap-left-outer {
          width: 416px;
          height: 74px;
          padding-left: 200px;
          padding-top: 15px;
          // background-color: yellowgreen;
          position: relative;

          .card-wrap-left-img-img {
            // border: 2px solid white;
            padding: 5px;
            display: block;
            width: 150px;
            height: 150px;
            position: absolute;
            background-color: #fefefe;
            top: -80px;
            left: 20px;
            z-index: 1;
          }

          .card-wrap-left-top {
            width: 416px;
            height: 40px;
            // background-color: brown;
            display: flex;
            align-items: center;
          }

          .card-wrap-left-content {
            display: flex;
            height: 20px;
            // background-color: burlywood;
          }
        }

      }

      .card-wrap-right {
        width: 180px;
        height: 50px;
        // background-color: coral;
        margin: 15px 20px 0 0;
        float: right;
        box-sizing: border-box;

        .card-wrap-right-outer {
          display: flex;
          height: 50px;
          border: 2px solid white;
        }

        .card-wrap-right-outer-left {
          width: 100px;
          background-color: #4f8ce8;

          .card-wrap-right-outer-left-text {
            line-height: 50px;
            color: whitesmoke;
            font-size: 20px;
          }
        }

        .card-wrap-right-outer-right {
          width: 80px;
          background-color: #ffffff;

          .card-wrap-right-outer-right-text {
            color: #737373;
          }
        }
      }
    }

    .card-nav {
      height: 50px;
      display: flex;
      background-color: #eceff2;

      .card-nav-left {
        height: 50px;
        width: 750px;
        display: flex;

        .card-nav-left-item {
          width: 76px;
          height: 50px;
          line-height: 50px;
        }

        .card-nav-left-item:hover {
          background-color: #dfe1e4;
        }


      }

      .card-nav-right {
        line-height: 50px;
      }
    }




  }
}
</style>